// src/App.js
import React, { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([
    { id: 1, text: '学习React基础知识', completed: true },
    { id: 2, text: '完成待办事项项目', completed: false },
    { id: 3, text: '阅读React官方文档', completed: false },
  ]);
  
  const [inputValue, setInputValue] = useState('');
  const [filter, setFilter] = useState('all');
  const [editingId, setEditingId] = useState(null);
  const [editText, setEditText] = useState('');

  // 添加新任务
  const addTodo = () => {
    if (inputValue.trim() !== '') {
      const newTodo = {
        id: Date.now(),
        text: inputValue,
        completed: false
      };
      setTodos([...todos, newTodo]);
      setInputValue('');
    }
  };

  // 删除任务
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  // 切换任务状态
  const toggleTodo = (id) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  // 开始编辑任务
  const startEditing = (todo) => {
    setEditingId(todo.id);
    setEditText(todo.text);
  };

  // 保存编辑
  const saveEdit = (id) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, text: editText } : todo
    ));
    setEditingId(null);
  };

  // 取消编辑
  const cancelEdit = () => {
    setEditingId(null);
  };

  // 过滤任务
  const filteredTodos = todos.filter(todo => {
    if (filter === 'active') return !todo.completed;
    if (filter === 'completed') return todo.completed;
    return true;
  });

  // 剩余任务数量
  const remainingTodos = todos.filter(todo => !todo.completed).length;

  return (
    <div className="app">
      <header className="app-header">
        <h1>React待办事项</h1>
        <p>使用React Hooks实现的任务管理工具</p>
      </header>
      
      <main className="todo-container">
        <div className="todo-input">
          <input
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            placeholder="添加新任务..."
            onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          />
          <button onClick={addTodo}>添加</button>
        </div>
        
        <div className="todo-filters">
          <button 
            className={filter === 'all' ? 'active' : ''} 
            onClick={() => setFilter('all')}
          >
            全部
          </button>
          <button 
            className={filter === 'active' ? 'active' : ''} 
            onClick={() => setFilter('active')}
          >
            进行中
          </button>
          <button 
            className={filter === 'completed' ? 'active' : ''} 
            onClick={() => setFilter('completed')}
          >
            已完成
          </button>
        </div>
        
        <div className="todo-stats">
          <p>剩余任务: <span>{remainingTodos}</span></p>
          <p>总任务数: <span>{todos.length}</span></p>
        </div>
        
        <ul className="todo-list">
          {filteredTodos.length === 0 ? (
            <li className="empty-message">暂无任务</li>
          ) : (
            filteredTodos.map(todo => (
              <li key={todo.id} className={todo.completed ? 'completed' : ''}>
                {editingId === todo.id ? (
                  <div className="edit-mode">
                    <input
                      type="text"
                      value={editText}
                      onChange={(e) => setEditText(e.target.value)}
                      autoFocus
                    />
                    <button onClick={() => saveEdit(todo.id)}>保存</button>
                    <button onClick={cancelEdit}>取消</button>
                  </div>
                ) : (
                  <div className="todo-item">
                    <input
                      type="checkbox"
                      checked={todo.completed}
                      onChange={() => toggleTodo(todo.id)}
                    />
                    <span className="todo-text">{todo.text}</span>
                    <div className="todo-actions">
                      <button onClick={() => startEditing(todo)}>编辑</button>
                      <button onClick={() => deleteTodo(todo.id)}>删除</button>
                    </div>
                  </div>
                )}
              </li>
            ))
          )}
        </ul>
      </main>
      
      <footer className="app-footer">
        <p>使用React Hooks实现 | 功能包括增删改查和状态切换</p>
      </footer>
    </div>
  );
}

export default App;